<template>
  <div>
    <div class="detail-cost-card">
      <div :class="{'is-mobile': showMobilePage}" class="cost-title">
        <div style="display: flex;align-items: center;margin-right:20px;">
          <div>
            <Title title="成本信息" font-size="16px">
              <div v-if="!isMengli" style="font-size: 14px">
              （<span>
              总成本：{{ (orderInfo.cost / 100) | moneyFilter }}
              </span>
              <contrast-info-tipTool
              :origin-data="configureOrderInfo"
              :new-data="orderInfo"
              :correlate-filed="['cost']"
              >
              <div slot="tipContent">
              <span style="font-size: 14px">{{ (getTargetData(configureOrderInfo, 'cost') / 100) | moneyFilter }}</span>
              </div>
              </contrast-info-tipTool>）
              </div>
            </Title>
          </div>

          <slot name="title-after"/>
          <div v-if="showCountFields" class="fields-count">
            <img :src="incomeAmountIcon" style="width: 16px; margin-right: 5px">
            {{ countFieldName }}：<span class="text">{{ countField }}</span>
          </div>
        </div>
        <div v-if="!hideAllOperation" class="btn-box">
          <div
            v-if="((isDetail && !isProject && !isMengli) && isOperation && isCostInfo && isCostRelate) ||
            (isOrder && !isCreate)"
            class="btn-box-group">
            <div
              v-if="(isDetail && !isProject && !isMengli) && isOperation && isCostInfo && isCostRelate"
              class="border-right"
              @click="toRelateCost">
              关联
            </div>
            <supplierStatus
              v-if="isOrder && !isCreate"
              :order-id="orderId"
              :btn-style="{
                color: '#666666',
                padding: '0 8px'
            }"/>
          </div>
          <PlainCreateBtn
            v-if="isOperation && isCostInfo"
            size="small"
            style="margin-left:8px;"
            @click="toCreate">新建成本</PlainCreateBtn>
        </div>
      </div>
      <div>
        <el-table
          v-if="list && list.costList && list.costList.length > 0"
          :data="currentPageData"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          class="fb-table"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <el-table-column align="left" label="成本编号" width="200">
            <template slot-scope="scope">
              <div class="light-word" @click="toCostDetail(scope.row)">
                <ToolTip :content="scope.row.costNum"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="成本项" width="200">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.costItemName" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="含税成本（元）" width="260">
            <template slot-scope="scope">
              <div class="ellipsis-wrap">
                <!-- costType  1: '平台', 2: '供应商', 4: '分成比例', 5: '公式计算' -->
                <div v-if="scope.row.taxCost || scope.row.taxCost === 0">
                  <PriceColumn :real-val="scope.row.taxCost" :price="scope.row.taxCost / 100" />
                </div>
                <span v-else>--</span>
                <span v-if="scope.row.costType === 1">
                  （<span>ID：</span>
                  <el-tooltip v-if="scope.row.platId || scope.row.platId === 0" placement="top" effect="dark">
                    <div slot="content" style="max-width: 100px;">{{ scope.row.platId }}</div>
                    <div class="line-clamp2 plat">{{ scope.row.platId }}</div>
                  </el-tooltip>
                  <span v-else>--</span>）
                </span>
                <span v-else-if="scope.row.costType === 4" >
                  （<span>分成比例：</span>
                  <span v-if="scope.row.dividePercent || scope.row.dividePercent === 0">{{ scope.row.dividePercent }}</span>
                  <span v-else>--</span>）
                </span>
                <span v-else-if="scope.row.costType === 5 && scope.row.autoCost" >
                  （自动）
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="供应商" width="200">
            <template slot-scope="scope">
              <div class="light-word" @click="toSupplierDetail(scope.row)">
                <ToolTip :content="scope.row.supplierName"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="showLinkIncome" align="left" label="关联收入项" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.linkIncomeItemNo" class="light-word" @click="toLinkIncome(scope.row)">
                <ToolTip :content="scope.row.linkIncomeItemNo"/>
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="可抵扣税率" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.deductionRate || scope.row.deductionRate === 0">{{ scope.row.deductionRate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="说明" width="120">
            <template slot-scope="scope">
              <ToolTip :content="scope.row.costDescription" />
            </template>
          </el-table-column>
          <el-table-column align="left" label="审批状态" width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.approvalStatus || scope.row.approvalStatus === 0" class="dot-wrap">
                <span :style="{backgroundColor: getColor(scope.row.approvalStatus)}" class="dot"/>
                {{ scope.row.approvalStatus | costApprovalStatus }}
              </div>
              <div v-else>--</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="成本状态" width="90">
            <template slot-scope="scope">
              <div
                :class="{'light-word': scope.row.settlementStatus === 1 || scope.row.settlementStatus === 2}"
                class="dot-wrap"
                @click="toSettleDetail(scope.row)">
                <span
                  :style="{backgroundColor: getCostColor(scope.row.settlementStatus)}"
                  class="dot"/>
                {{ scope.row.settlementStatus | settlementStatusFilter }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="审批时间" width="160" prop="approvalDate">
            <template slot-scope="scope">
              <div v-if="scope.row.approvalDate">{{ scope.row.approvalDate | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="申请人" width="100" prop="proposer">
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.proposerId" :user-id="scope.row.proposerId" :label="scope.row.proposer" />
              <ToolTip v-else :content="scope.row.proposer"/>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建人" width="100" prop="creator" >
            <template slot-scope="scope">
              <CheckUserInfo v-if="scope.row.creator" :user-id="scope.row.creatorId" :label="scope.row.creator" />
              <ToolTip v-else :content="scope.row.creator"/>
            </template>
          </el-table-column>
          <el-table-column align="left" label="创建时间" width="160">
            <template slot-scope="scope">
              <div v-if="scope.row.createDate">{{ scope.row.createDate | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="isOperation && isCostInfo && !hideAllOperation" align="left" label="操作" width="110" fixed="right">
            <template slot-scope="scope">
              <div v-if="!(scope.row.settlementStatus === 1 || scope.row.settlementStatus === 2 || scope.row.settlementStatus === 4)" style="display:flex;">
                <div
                  v-if="projectStatus !== 5 &&
                    !(scope.row.settlementStatus === 1 || scope.row.settlementStatus === 2) &&
                  scope.row.approvalStatus !== 1"
                  class="button-text br"
                  @click="toEdit(scope)">编辑</div>
                <el-dropdown trigger="click">
                  <div class="el-dropdown-link">
                    <div class="button-text">更多<i class="el-icon-arrow-down"/></div>
                  </div>
                  <el-dropdown-menu
                    slot="dropdown"
                    style="margin-top:-24px;margin-right:15px;padding: 0;"
                    class="dropdown-wrap">
                    <!-- settlementStatus： 3: '待关联',0: '待结算',2: '结算中',1: '已完成',5: '已忽略' -->
                    <!-- 成本状态=待结算，且填写供应商 -->
                    <el-dropdown-item v-if="canApproval(scope.row) && (isCreate || isDetail)" @click.native="costApprovalDialog(-1, scope.row)">
                      <div>审批</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="hasRouteAuth('medium:supplierAudit:launch') && showSettlementBtn && scope.row.supplierId && scope.row.settlementStatus === 0" @click.native="toSettlement(scope.row, scope)">
                      <div>结算</div>
                    </el-dropdown-item>
                    <el-dropdown-item
                      v-if="projectStatus !== 5 &&
                        !scope.row.isAutoCreate &&
                        !(scope.row.settlementStatus === 1 || scope.row.settlementStatus === 2) &&
                      scope.row.approvalStatus !== 1 && (hasRouteAuth('crm:cost:delete') || scope.row.creatorId === userInfo.id)"
                      @click.native="toDel(scope.row, scope)">
                      <div>删除</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="!(scope.row.settlementStatus === 1 || scope.row.settlementStatus === 2) && isDetail && isOrder && isCostRelate" @click.native="toCancel(scope.row)">
                      <div>取消关联</div>
                    </el-dropdown-item>
                    <el-dropdown-item v-if="canApprovalCancel(scope.row) && (isCreate || isDetail)" @click.native="costApprovalDialog(0, scope.row)">
                      <div>作废审批</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="empty-class">
          <div class="empty-box">
            <img :src="emptyIcon" alt=""> 暂无数据
          </div>
        </div>
        <el-row type="flex" justify="end" class="pagination-area">
          <el-pagination
            v-show="list.total > 10"
            :current-page="list.page"
            :page-size="list.perPage"
            :total="list.total"
            :page-sizes="[10, 20, 50, 100, 250, 500]"
            :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </el-row>
      </div>
    </div>
    <!-- 关联成本 -->
    <relatedCostDialog ref="relatedCostRef" :cost-belong-type="costBelongType" :order-id="orderId" @updateCostList="updateCostList"/>
    <!-- 新建/编辑成本 -->
    <createCost ref="costRef" :type="type" :cost-belong-type="costBelongType" :cost-id="costId" :cost-data="costData" :related-order-id="orderId" :only-return-form-data="!isDetail" :page-from="isMengli ? 'mengli' : ''" @submit="submit" @handleClose="handleClose"/>
    <!-- 成本审核 -->
    <CostApprovalDialog
      ref="costApproval"
      :cost-ids="costIds.toString()"
      :type="approvalType"
      :is-batch="0"
      @costApprovalhandle="updateCostList" />
  </div>
</template>

<script>
import { deleteCost, cancelRelated } from '@/api/costManage';
import emptyIcon from '@/assets/empty-invoice.png';
import Title from '@/components/Title';
import relatedCostDialog from './relatedCostDialog';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createCost from '@/components/Cost/createCost';
import { showString } from '@/filters/showString';
import { moneyFilter } from '@/filters/number';
import {
  settlementStatusFilter,
  costApprovalStatus } from '@/filters/status';
import supplierStatus from '@/components/OrderList/dialogComponent/supplierStatus';
import ElMessage, { showModal } from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
// 信息对比需要
import ContrastInfoTipTool from './orderDetail/contrastInfoTiptool';
import { getTargetData } from '@/utils';
import { standardFormat } from '@/filters/date';
import setting from '@/assets/setting.png';
import emptyImg from '@/assets/empty-data-icon.png';
import incomeAmountIcon from '@/assets/chargeOffDetail/incomeAmount.png';
// mixins
import isAdmin from '@/mixins/isAdmin';
import costSet from '@/mixins/costSet';
import { mapState } from 'vuex';

export default {
  components: {
    Title,
    supplierStatus,
    ContrastInfoTipTool,
    relatedCostDialog,
    createCost,
    EmptyPlaceholder },
  filters: {
    showString,
    moneyFilter,
    settlementStatusFilter,
    standardFormat,
    costApprovalStatus },
  mixins: [
    isAdmin,
    costSet],
  props: {
    costBreakdown: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showSettlementBtn: { // 是否展示结算按钮
      type: Boolean,
      default: false
    },
    hideAllOperation: { // 隐藏所有操作
      type: Boolean,
      default: false
    },
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    configureOrderInfo: {
      type: Object,
      default: () => {
        return null;
      }
    },
    orderId: {
      type: String | Number,
      default: ''
    },
    orderNum: { // 订单编码
      type: String | Number,
      default: ''
    },
    isCreate: {
      type: Boolean,
      default: false
    },
    isProject: { // 项目入口进入
      type: Boolean,
      default: false
    },
    isMengli: { // 萌力入口进入
      type: Boolean,
      default: false
    },
    isOrder: { // 渠道进入
      type: Boolean,
      default: false
    },
    isDetail: { // 详情页添加成本单独调用接口
      type: Boolean,
      default: false
    },
    isMakeUpOrder: { // 补差单
      type: Boolean,
      default: false
    },
    isEditOrder: { // 调整单
      type: Boolean,
      default: false
    },
    orderStatus: {
      type: String | Number,
      default: null
    },
    isCostInfo: { // 成本信息编辑权限判断
      type: Boolean,
      default: true
    },
    isCostRelate: { // 关联成本权限
      type: Boolean,
      default: true
    },
    costBelongType: { // 成本来源
      type: Number,
      default: null
    },
    sealingDisabled: { // 销售初审进入可进行编辑，删除，取消关联
      type: Boolean,
      default: false
    },
    sealingActive: { // 财务复审进入不可进行编辑，删除，取消关联
      type: Boolean,
      default: false
    },
    showCountFields: {
      type: Boolean,
      default: false
    },
    showLinkIncome: {
      type: Boolean,
      default: false
    },
    fieldName: {
      type: String,
      default: 'taxCost'
    },
    countFieldName: {
      type: String,
      default: '成本总额(元)'
    },
    projectStatus: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      setting, emptyImg, emptyIcon, incomeAmountIcon,
      list: {
        costList: [],
        page: 1,
        perPage: 10,
        total: 0
      },
      costId: 0,
      costData: {},
      type: '',
      count: 0,
      isIntelligent: false,
      currentPage: 1, // 当前页数 ，默认为1
      pageSize: 10, // 每页显示数量
      currentPageData: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    }),
    isOperation() {
      // 订单不能为封账中、已封账和已完成 或者 是补差单、调整单
      return this.isMakeUpOrder || this.isEditOrder ||
      (
        !((
          (this.orderStatus === 5 && !this.sealingDisabled) ||
          (this.orderStatus === 5 && this.sealingActive)
        ) ||
          this.orderStatus === 6 || this.orderStatus === 7
        )
      );
    },
    // xx总额
    countField() {
      const list = this.list.costList || [];
      if (!Array.isArray(list) || !list || !list.length) {
        return Number(0).toFixed(2);
      }
      return (Number(list.map(el => Number(el[`${this.fieldName}`])).reduce((pre, next) => { return pre + next; }, 0)) / 100).toFixed(2);
    }
  },
  methods: {
    getTargetData,
    hasRouteAuth,
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData(ary) {
      const begin = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.currentPageData = ary.slice(
        begin,
        end
      );
    },
    insertDetail(obj) {
      const costBreakdown = JSON.parse(JSON.stringify(obj));
      this.list.total = costBreakdown.costList.length;
      this.list.costList = costBreakdown.costList;
      if (this.list.costList.length > 10) { // 如果数据列表大于pageSize且数据大于10条的情况下则分页
        this.setCurrentPageData(this.list.costList);
      } else {
        this.currentPageData = this.list.costList;
      }
    },
    // 新建成本
    toCreate() {
      this.$refs.costRef.openDialog();
      this.type = 'create';
    },
    toRelateCost() {
      const clientHeight = window.innerHeight;
      this.$refs.relatedCostRef.tableHeight = (clientHeight * 1) / 2;
      this.$refs.relatedCostRef.dialogVisible = true;
    },
    submit(obj) {
      if (!this.isDetail) {
        if (this.type === 'create') {
          if (obj) {
            obj.taxCost = obj.taxCost ? (obj.taxCost * 100).toFixed(0) : null;
            obj.dividePercent = obj.dividePercent ? this.showPrecise((obj.dividePercent / 100)) : null;
            if (!this.list.costList.length) {
              this.list.costList.push({ ...obj, count: this.count++ });
              this.list.total++;
            } else {
              let isRepeat = false;
              isRepeat = this.list.costList.some(oldObj => {
                return obj.costItemName === '达人分成' && oldObj.costItemName === obj.costItemName;
              });
              if (!isRepeat) {
                this.list.costList.push({ ...obj, count: this.count++ });
                this.list.total++;
              } else {
                ElMessage.warning('禁止添加多个达人分成');
                return false;
              }
            }
            if (this.list.costList.length > 10) {
              this.setCurrentPageData(this.list.costList);
            } else {
              this.currentPageData = this.list.costList;
            }
          }
        } else if (this.type === 'edit') {
          if (obj) {
            obj.taxCost = obj.taxCost ? (obj.taxCost * 100).toFixed(0) : null;
            obj.dividePercent = obj.dividePercent ? this.showPrecise((obj.dividePercent / 100)) : null;
            let isEditRepeat = false;
            if (!this.isIntelligent) {
              isEditRepeat = this.list.costList.some(oldObj => {
                return obj.costItemName === '达人分成' && oldObj.costItemName === obj.costItemName;
              });
            }
            if (!isEditRepeat) {
              if (this.isCreate) {
                this.list.costList = this.list.costList.map(oldObj => {
                  return oldObj.count === obj.count ? obj : oldObj;
                });
              } else {
                this.list.costList = this.list.costList.map(oldObj => {
                  return oldObj.id === obj.id ? obj : oldObj;
                });
              }
            } else {
              ElMessage.warning('禁止添加多个达人分成');
              return false;
            }
            if (this.list.costList.length > 10) {
              this.setCurrentPageData(this.list.costList);
            } else {
              this.currentPageData = this.list.costList;
            }
          }
        }
      } else {
        this.$emit('update'); // 更新数据
      }
    },
    showPrecise(num, precision = 12) { // 精度处理
      // 适用于长数值的直接展示 不适用于 两个浮点数的计算
      return +parseFloat(num.toPrecision(precision));
    },
    toEdit(scope) {
      this.$refs.costRef.openDialog();
      // this.$refs.costRef.formatSupplierName(scope.row.supplierId, scope.row.supplierName);
      if (this.isDetail) {
        this.costId = scope.row.id;
      } else {
        // scope.row.taxCost = scope.row.taxCost && this.$refs.costRef.dialogVisible ? scope.row.taxCost / 100 : null;
        this.isIntelligent = scope.row.costItemName === '达人分成';
        this.costData = scope.row;
      }
      this.type = 'edit';
    },
    toDel(item, scope) {
      showModal('是否确定删除？', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        if (!this.isDetail) {
          this.list.costList.splice(scope.$index, 1);
          if (this.list.costList.length <= 10) {
            this.currentPageData = this.list.costList;
          } else {
            this.currentPageData.splice(scope.$index, 1);
          }
          this.list.total--;
        } else {
          deleteCost({ id: item.id }).then(res => {
            ElMessage.success('删除成功');
            this.handleCurrentChange(1);
          });
        }
      });
    },
    toCancel(item) {
      showModal('是否取消关联？', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        cancelRelated(item.id).then(res => {
          ElMessage.success('取消成功');
          this.$emit('update'); // 更新数据
        });
      });
    },
    // 跳转到供应商结算页 id: 供应商id, costItemId:传成本项id，costId:成本id，relatedOrderId:关联订单id, name: 成本项名称， orderId: 订单编号
    toSettlement({ id, costItemId, relatedOrderId, supplierId, costItemName, costBelong }) {
      if (!supplierId) {
        this.$message.warning('该成本未填供应商，无法发起结算');
        return false;
      }
      let routeUrl = null;
      routeUrl = this.$router.resolve({
        name: 'supplierCreate', // supplierDetail
        query: {
          id: supplierId, // 供应商id，查找信息
          // （第一步）成本选择阶段
          costItemId, // 成本项id，选中该成本项
          name: costItemName, // 成本项名称，选中该成本项
          // （第二步）审核项选择阶段
          relatedOrderId, // 关联订单id，选中该关联订单（如果有的话）
          costId: id, // 成本id，选中该成本
          orderId: this.orderNum || '', // 订单编号，查找该订单，并选中该订单
          costBelong: costBelong, // 成本归属，选中该成本归属

          otherDetail: '1'
        }
      });
      if (routeUrl) window.open(routeUrl.href, '_blank');
    },
    handleSizeChange(val) {
      this.pageSize = val;
      if (this.isDetail) {
        this.$emit('update'); // 更新数据
      } else {
        this.list.perPage = val;
        this.setCurrentPageData(this.list.costList);
      }
    },
    handleCurrentChange(toPage) {
      this.currentPage = toPage;
      this.list.page = toPage;
      if (this.isDetail) {
        this.$emit('update'); // 更新数据
      } else {
        this.setCurrentPageData(this.list.costList);
      }
    },
    updateCostList() {
      this.$emit('update'); // 更新数据
    },
    handleClose(value) {
      this.type = value;
    },
    toCostDetail(row) {
      const url = this.$router.resolve({
        name: 'costDetail',
        params: { id: row.id }
      });
      window.open(url.href, '_blank');
    },
    // 新窗口打开供应商详情页
    toSupplierDetail(row) {
      const name = this.isMengli ? 'mengliSupplierDetail' : 'supplierManageDetail';
      const url = this.$router.resolve({
        name: name,
        params: { id: row.supplierId }
      });
      window.open(url.href, '_blank');
    },
    toSettleDetail(row) {
      if (row.settlementStatus === 1 || row.settlementStatus === 2) {
        if (!row.supplierId) return;
        const url = this.$router.resolve({
          name: 'supplierDetail',
          query: {
            settleId: row.settleId,
            id: row.supplierId,
            isSettle: true
          }
        });
        window.open(url.href, '_blank');
      }
    },
    toLinkIncome(item) {
      this.$emit('toLinkIncome', item);
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/styles/placeholder.scss';
.dot-wrap {
  @extend %dot-wrap;
}
.detail-cost-card {

  & ::v-deep {
    .el-card {
      padding: 0;
    }
    .cost-title {
      position: relative;
      display: flex;
      margin-bottom: 10px;
      align-items: center;
      &.is-mobile {
        display: block;
        .btn-box {
          position: relative !important;
          margin-top: 10px;
        }
      }
    }
    .btn-box {
      position: absolute;
      right: 0;
      display: flex;
      align-items: center;
      .btn-box-group {
        height: 32px;
        border: 1px solid #DDDDDD;
        border-radius: 4px;
        display: flex;
        align-items: center;
        .border-right {
          position: relative;
          color: #666666;
          font-size: 14px;
          padding: 0 8px;
          cursor: pointer;
        }
        .border-right::after {
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -7px;
          content: '';
          width: 1px;
          height: 14px;
          background-color: #ddd;
        }
      }
    }
    .btn-create {
      padding: 7px 20px;
      color:rgba(255,255,255,1);
      .center {
        display: flex;
        align-items: center;
        justify-content: center;
        .name {
          margin-right: 5px;
        }
      }
    }
    .el-form-item__label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 14px;
    }
    .el-form-item__error {
      left: 94px;
    }
    .el-form-item__content {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 14px;
    }
  }
}
.light-word {
  color: #406eff;
  cursor: pointer;
}
.line-clamp2 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.empty-class {
  color: #999999;
  text-align: center;
  font-size: 14px;
  padding: 12px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EBEEFD;
  .empty-box {
    display: flex;
    align-items: center;
  }
  img {
    width: 12px;
    margin-right: 4px;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
}
.plat {
  display: table-cell;
  max-width: 100px;
}
.ellipsis-wrap {
  display: flex;
  span {
    display: flex;
  }
  &::v-deep {
    .item {
      max-width: 100px;
    }
  }
}

</style>
<style lang="scss">
.dropdown-wrap {
  margin-top: -24px;
  margin-right: 15px;
  padding: 0;
    .el-dropdown-menu__item {
      width: 100px !important;
      text-align: center !important;
    }
}
</style>
